<template>
  <div>
    <!-- 面包屑 -->
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-fold"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>服务管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 表单 -->
    <el-card shadow="always">
      <!-- 表头 -->
      <div slot="header">
        <el-button type="primary" size="medium" style="margin-bottom: 15px;" @click="releaseService">发布服务</el-button>

        <el-form :inline="true" label-width="80px" class="demo-form-inline"
          style="display: flex;justify-content: space-between;">
          <el-form-item label="服务项目:">
            <el-input placeholder="请输入服务项目" size="medium" style="width: 180px;" v-model="serviceitem"></el-input>
          </el-form-item>
          <el-form-item label="服务分类:">
            <el-select placeholder="请选择服务分类" size="medium" style="width: 180px;" v-model="typeid">
              <el-option label="全部" :value="0"></el-option>
              <el-option v-for="type1 in typeName" :label="type1.typename" :value="type1.id" :key="type1.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商户名称:">
            <el-input placeholder="请输入商户名称" size="medium" style="width: 180px;" v-model="name"></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: center;">
          <el-button type="primary" size="medium" @click="getSearchServiceList">查询</el-button>

          <el-button size="medium" @click="clearForm">清空筛选条件</el-button>
        </div>
      </div>
      <!-- 表体 -->
      <!-- 表格 -->
      <el-table border style="width: 100%" size="medium" :data="tableData" v-loading="loading">
        <el-table-column prop="id" label="服务编号" width="100" align="center">
        </el-table-column>
        <el-table-column prop="serviceitem" label="服务项目" width="100" align="center">
        </el-table-column>
        <el-table-column prop="name" label="商家名称" width="120" align="center">
        </el-table-column>
        <el-table-column prop="originalprice" label="原价(元)" width="120" align="center">
        </el-table-column>
        <el-table-column prop="presentprice" label="现价(元)" width="120" align="center">
        </el-table-column>
        <el-table-column prop="content" label="服务介绍" width="120" align="center">
        </el-table-column>
        <el-table-column prop="createdate" label="创建时间" min-width="150" align="center">
        </el-table-column>
        <el-table-column prop="address" label="操作" fixed="right" min-width="140" align="center">
          <template slot-scope="{row}">
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteService(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination style="text-align: center;margin-top: 20px;" @current-change="getServiceManagerList"
        @size-change="getServiceManagerList" :current-page.sync="pageInfo.pageNum" :page-sizes="[3, 5, 10, 20]"
        :page-size.sync="pageInfo.pageSize" layout="prev, pager, next,total,jumper,->, sizes" :total="pageInfo.total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "ServiceManager",
  data() {
    return {
      pageInfo: {
        pageNum: 1,
        pageSize: 3,
        total: 20,
      },
      tableData: [],
      typeid: 0,
      mid: '',
      serviceitem: '',
      name: '',
      loading: false,
      typeName: [],
    }
  },
  mounted() {
    this.getServiceManagerList();
  },
  methods: {
    async getServiceManagerList() {
      this.loading = true;
      let { pageNum, pageSize } = this.pageInfo;
      let { typeid, mid, serviceitem, name } = this;
      let res = await this.$API.CarService.reqServiceManagerList(pageNum, pageSize, typeid, mid, serviceitem, name);
      let res1 = await this.$API.CarService.reqServiceTypeList();
      if (res1.code == 200) {
        this.typeName = res1.data;
      } else {
        this.typeName = [];
        this.$message({ message: '没有数据', type: 'error' })
      }
      // 
      if (res.code == 200) {
        this.pageInfo.total = res.data.total;
        this.tableData = res.data.list;
        // this.typeName= res.data.list
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
        this.$message({ message: '没有数据', type: 'error' })
      }
      this.loading = false;
    },
    async getSearchServiceList() {
      this.pageInfo.pageNum = 1;
      await this.getServiceManagerList();

      if (this.tableData.length > 0) {
        this.$message({ message: '查询成功', type: 'success' })
      }
    },
    clearForm() {
      this.typeid = 0;
      this.name = '';
      this.serviceitem = ''
      this.pageInfo.pageNum = 1;
      this.getServiceManagerList();
    },
    releaseService() {
      this.$router.push({
        name: "ServiceRelease",
      })
    },
    deleteService(id) {
      this.$confirm('确定删除该服务吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$API.CarService.reqDeleteServiceById(id);
        if (res.code == 200) {
          this.pageInfo.pageNum = 1;
          this.$message({ message: '删除成功', type: 'success' })
        };
        this.getServiceManagerList();
        this.$message({ type: 'success', message: '删除成功!' });
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' });
      });

    }
  },
}
</script>

<style scoped></style>